import ProTable, {ActionType, ProColumns} from "@ant-design/pro-table";
import {Button, Dropdown, Modal} from "antd";
import React, {useRef, useState} from "react";
import request from 'umi-request';
import {EllipsisOutlined, PlusOutlined} from "@ant-design/icons";
import {columns, getColumns, menu, paginationSetting} from "@/pages/TerminalDataList/data.config";
import {ShippingResult} from "@/models/shippingResult";

// const onTableRequest = async (params = {}, sort: Record<string, SortOrder>, filter: Record<string, ReactText[] | null>) => {
//   return request<{ data: ShippingResult[] }>('/api/excel/all', {params});
// }


const TerminalDataList: React.FC = () => {
  //new one object, user ref default have .current function
  const actionRef = useRef<ActionType>();
  const [visible, setVisible] = useState(false);


  // const columns: ProColumns<ShippingResult>[] = [
  //   {
  //     dataIndex: 'index',
  //     valueType: 'indexBorder',
  //     width: 48,
  //   },
  //   {
  //     title: '费用表格流水号',
  //     dataIndex: 'chargeItemNo',
  //     formItemProps: {
  //       rules: [
  //         {
  //           required: true,
  //           message: '此项为必填项',
  //         },
  //       ],
  //     },
  //   },
  //   {
  //     title: '费目ID',
  //     dataIndex: 'itemId',
  //     formItemProps: {
  //       rules: [
  //         {
  //           required: true,
  //           message: '此项为必填项',
  //         },
  //       ],
  //     },
  //   },
  //   {
  //     title: '费目',
  //     dataIndex: 'itemDetail',
  //     width: '15%',
  //     copyable: true,
  //     ellipsis: true,
  //     tip: '标题过长会自动收缩',
  //     formItemProps: {
  //       rules: [
  //         {
  //           required: true,
  //           message: '此项为必填项',
  //         },
  //       ],
  //     },
  //   },
  //   {
  //     title: '属性',
  //     dataIndex: 'type'
  //   },
  //   {
  //     title: '数量',
  //     dataIndex: 'qty',
  //     hideInSearch: true
  //   },
  //   {
  //     title: '计价单位',
  //     dataIndex: 'unit',
  //     hideInSearch: true,
  //     hideInTable: true
  //   },
  //   {
  //     title: '单价',
  //     dataIndex: 'unitPrice',
  //     hideInSearch: true
  //   },
  //   {
  //     title: '折扣',
  //     dataIndex: 'discount',
  //     hideInSearch: true
  //   },
  //   {
  //     title: '金额',
  //     dataIndex: 'amount',
  //     hideInSearch: true
  //   },
  //   {
  //     title: '代理',
  //     dataIndex: 'agentAbbr',
  //     hideInSearch: true,
  //     hideInTable: true
  //   },
  //   {
  //     title: '代理名称',
  //     dataIndex: 'agentName',
  //     hideInTable: true,
  //     hideInSearch: true
  //   },
  //   {
  //     title: '付费人',
  //     dataIndex: 'payerAbbr',
  //     hideInTable: true,
  //     hideInSearch: true
  //   },
  //   {
  //     title: '付费人名称',
  //     hideInTable: true,
  //     dataIndex: 'payerName',
  //     hideInSearch: true
  //   },
  //   {
  //     title: '税率',
  //     dataIndex: 'taxRate',
  //     hideInSearch: true
  //   },
  //   {
  //     title: '净价',
  //     dataIndex: 'netPrice',
  //     width: '5%',
  //     hideInSearch: true
  //   },
  //   {
  //     title: '税额',
  //     dataIndex: 'tax',
  //     width: '5%',
  //     hideInSearch: true
  //   },
  //   {
  //     title: '状态',
  //     dataIndex: 'state',
  //     filters: true,
  //     onFilter: true,
  //     valueType: 'select',
  //     valueEnum: {
  //       all: {text: '全部', status: 'Default'},
  //       open: {
  //         text: '未处理',
  //         status: 'Error',
  //       },
  //       closed: {
  //         text: '完全匹配',
  //         status: 'Success',
  //         disabled: true,
  //       },
  //       processing: {
  //         text: '处理中',
  //         status: 'Processing',
  //       },
  //     },
  //   },
  //   {
  //     title: '操作',
  //     valueType: 'option',
  //     render: (text, record, _, action) => [
  //       <a
  //         key="editable"
  //         onClick={() => {
  //           action?.startEditable?.(record.itemId);
  //         }}
  //       >
  //         编辑
  //       </a>,
  //       <a key="view" onClick={() => {
  //         handleViewClick()
  //       }}>
  //         查看详情
  //       </a>
  //     ],
  //   },
  // ];

  // function handleViewClick() {
  //   setVisible(true);
  // };


  return (
    //action ref =>table action 的引用，用于自定义触发
    //request => 获取datasource 的方法
    <div>
      <ProTable<ShippingResult>
        columns={columns}
        actionRef={actionRef}
        request={async (params) => {
          const resp = request('/api/excel/all/resp');
          return Promise.resolve(resp);
        }}
        editable={{type: 'multiple'}}
        rowKey="itemId"
        pagination={paginationSetting}
        headerTitle="test table"
        toolBarRender={() => [
          <Button key="button" icon={<PlusOutlined/>} type="primary">
            create
          </Button>,
          <Dropdown key="menu" overlay={menu}>
            <Button>
              <EllipsisOutlined/>
            </Button>
          </Dropdown>
        ]}
      ></ProTable>
      <Modal
        title="Modal 1000px width"
        centered
        visible={visible}
        onOk={() => setVisible(false)}
        onCancel={() => setVisible(false)}
        width={1000}
      >
        <p>some contents...</p>
        <p>some contents...</p>
        <p>some contents...</p>
      </Modal>
    </div>

  )
}
export default TerminalDataList;

